import { formatBigNumber, formatTimestamp } from "@/comm/format";

export const getVolOption = (ary: any[], props: any) => {
    const item1: any = (props.items as any)[0];
    let option: any = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    color: "#ffffff",
                    backgroundColor: "#000000",
                    formatter: function (a: any) {
                        // console.log(a);
                        if (a.axisDimension == "y") {
                            let num = Number(a.value);
                            if (num < 1) {
                                return num.toFixed(6);
                            }
                            return num.toFixed(2);
                        }
                        // const date = new Date(ary[a.value].timestamp);
                        return formatTimestamp(ary[a.value][props.timestampKey]); // 这里使用默认的日期格式
                    }
                }
            },
            borderWidth: 0,
            backgroundColor: "#2F363E",
            formatter: function (params: any[]) {
                let t1 = `<span class='ct-num'>${formatTimestamp(params[0].data.name)}</span>`;
                // let t2 = `<span class='ct-tip'>${item1.tip}</span> <span class='ct-num'>${params[0].data.value}</span>`;
                // let t3 = `<span class='ct-tip'>${item2.tip}</span> <span class='ct-num'>${params[1].data.value}</span>`;

                let s: any = params.map((val, n) => {
                    return `<span class='ct-tip'>${props.items![n].tip}</span> <span class='ct-num'>${val.data.value}</span>`;
                });

                return [t1, ...s].join("<br>");
            }
        },
        legend: {
            data: props.items?.map((i: any) => i.tip),
            bottom: 10,
            textStyle: {
                fontSize: 12,
                color: "#ffffff"
            }
        },
        grid: {
            containLabel: false
        },
        xAxis: {
            type: "category",
            splitLine: {
                show: false
            },
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                data: ary.map((val, i) => {
                    return val[props.timestampKey];
                }),
                formatter: function (value: any) {
                    return formatTimestamp(ary[value][props.timestampKey]);
                }
            }
        },
        yAxis: [
            {
                type: "value",
                position: "left",
                name: item1.axis,
                nameLocation: "end",
                nameGap: 20,
                nameTextStyle: {
                    align: "right"
                },
                boundaryGap: [0, "100%"],
                splitLine: {
                    show: true,
                    lineStyle: { color: "rgba(255, 255, 255, 0.06)" }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#B1B6C6"
                    }
                },
                axisLabel: {
                    formatter: (a: any) => {
                        return formatBigNumber(a, 2);
                    }
                }
            }
            // {
            //     type: "value",
            //     position: "right",
            //     name: "价值",
            //     nameLocation: "end",
            //     nameGap: 20,
            //     nameTextStyle: {
            //         align: "left"
            //     },
            //     boundaryGap: [0, "100%"],
            //     splitLine: {
            //         show: true,
            //         lineStyle: { color: "rgba(255, 255, 255, 0.06)" }
            //     },
            //     axisLine: {
            //         show: false,
            //         lineStyle: {
            //             color: "#B1B6C6"
            //         }
            //     },
            //     axisLabel: {
            //         formatter: "{value}"
            //     }
            // }
        ],
        series: [
            {
                name: item1.tip,
                type: "line",
                smooth: true,
                showSymbol: false,
                data: ary.map(i => {
                    return {
                        name: i[props.timestampKey],
                        value: i[item1.key]
                    };
                }),
                lineStyle: {
                    color: "#2DAEA1"
                },
                itemStyle: {
                    normal: {
                        color: "#2DAEA1"
                    }
                },
                markline: {
                    silent: true,
                    lineStyle: {
                        normal: {
                            color: "#2DAEA1"
                        }
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        // {
                        //     offset: 0,
                        //     color: "rgba(45,174,161,0.8)"
                        // },
                        // {
                        //     offset: 1,
                        //     color: "rgba(45,174,161,0)"
                        // }
                        {
                            offset: 0,
                            color: "rgba(13,203,129,0.4)"
                        },
                        {
                            offset: 1,
                            color: "rgba(13,203,129,0.1)"
                        }
                    ])
                }
            }
        ]
    };

    if (props.items?.length) {
        for (let i = 1; i < props.items?.length; i++) {
            let { tip, key, axis } = props.items[i];
            option.series.push({
                name: tip,
                type: "line",
                smooth: true,
                yAxisIndex: i,
                showSymbol: true,
                data: ary.map(i => {
                    return {
                        name: i[props.timestampKey],
                        value: i[key]
                    };
                }),
                itemStyle: {
                    normal: {
                        color: "#207ED3"
                    }
                },
                lineStyle: {
                    color: "#207ED3"
                }
            });

            option.yAxis.push({
                type: "value",
                position: "right",
                name: axis,
                nameLocation: "end",
                nameGap: 20,
                nameTextStyle: {
                    align: "left"
                },
                boundaryGap: [0, "100%"],
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#B1B6C6"
                    }
                    // formatter: function (value:any, index:number) {
                    //     console.log(value, "---value-----")
                    //     // value大于1000时除以1000并拼接k，小于1000按原格式显示
                    //     if (value >= 1000000) {
                    //         value = value / 1000000 + "M";
                    //     }else if(value >= 1000){
                    //         value = value / 1000000 + "K";
                    //     }
                    //     return value;
                    // },
                },
                axisLabel: {
                    formatter: (a: any) => {
                        // console.log("----", a)
                        return formatBigNumber(a, 2);
                    }
                }
            });
        }
    }

    return option;
};
